<template>
	<div class="orders-consult">
		<el-checkbox
			class="read-my-order-btn"
			v-model="readMyOrders"
			@change="loadOrders(1)"
		>
			仅看我负责的订单
		</el-checkbox>
		<!-- 数据统计 -->
		<div class="table-container">
			<el-table
				ref="table"
				stripe
				:data="orders"
			>
				<el-table-column
					label="下单时间"
					prop="orderCreateTime"
					align="center"
					width="100"
				/>
				<el-table-column
					label="下单用户"
					align="center"
				>
					<template slot-scope="scope">
						{{scope.row.scpUserId}} - {{scope.row.nickname}}
					</template>
				</el-table-column>
				<el-table-column
					label="手机号"
					prop="phone"
					align="center"
				/>
				<el-table-column
					label="学长学姐"
					align="center"
				>
					<template slot-scope="scope">
						{{scope.row.siUId}} - {{scope.row.siNickName}}
					</template>
				</el-table-column>
				<el-table-column
					label="花费 - 咨询时间"
					align="center"
				>
					<template slot-scope="scope">
						{{scope.row.scpTotalPrice}} - {{scope.row.scpTimeCount*30}}分钟
					</template>
				</el-table-column>
				<el-table-column
					label="订单状态"
					align="center"
				>
					<template slot-scope="scope">
						<el-tag :type="orderStatus(scope.row.scpStatusInfo).type">{{orderStatus(scope.row.scpStatusInfo).name}}</el-tag>
						<div class="note">{{scope.row.scpNote}}</div>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
							size="mini"
							@click="$pushTo('ConsultOrderDetail',{scpId:scope.row.scpId})"
						>
							查看详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					:current-page="pageNum"
					@current-change="loadOrders"
				/>
			</div>
		</div>
		<!-- 订单详细 -->
		<OrderDetail
			v-if="order"
			:order="order"
			@close="order=null"
		/>
	</div>
</template>

<script>
import { getConsultOrder } from '@user/api/order'
import { consultOrderStatus } from '@user/constants/consult'
export default {
  name: 'orders-project',
  data() {
    return {
      pageNum: 1, // 当前页数
      pageSize: 10, // 每页显示多少条
      total: 0,
      readMyOrders: false,
      orders: [],
    }
  },
  computed: {
    orderStatus() {
      return function(status) {
        status.type = consultOrderStatus[ status.code ].type
        return status
      }
    }
  },
  created() {
    this.loadOrders(1)
  },
  methods: {
    /**
		 * 加载订单
		 */
    async loadOrders(pageNum = this.pageNum) {
      this.$loading()
      try {
        const { data: res } = await getConsultOrder({
          pageNum,
          pageSize: this.pageSize,
          scsId: this.readMyOrders ? this.$rootApp.getMyInfo().userInfo.userId : undefined
        })

        this.orders = res.pageData.map(item => {
          return {
            ...item,
            orderCreateTime: item.orderCreateTime ? moment(item.orderCreateTime).format('YYYY/MM/DD HH:mm:ss') : '异常'
          }
        })

        this.pageNum = pageNum
        this.total = res.total
        console.log(this.orders)

      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.orders-consult {
  position: relative;

  .read-my-order-btn {
    position: absolute;
    top: -40px;
    right: 0;
  }
}
</style>
